<template>
  <div class="profile-card">
    <div class="profile-header">
      <img src="https://picsum.photos/id/1005/100/100" alt="Avatar" class="avatar" />
      <div class="profile-info">
        <h3 class="name">John Doe</h3>
        <p class="bio">热爱技术与生活</p>
      </div>
    </div>
    <div class="stats">
      <div class="stat-item">
        <span class="count">{{ formatNum(888) }}</span>
        <span class="label">运行天数</span>
      </div>
      <div class="stat-item">
        <span class="count">{{ formatNum(123456) }}</span>
        <span class="label">PV</span>
      </div>
      <div class="stat-item">
        <span class="count">{{ formatNum(78910) }}</span>
        <span class="label">UV</span>
      </div>
    </div>
    <div class="action-buttons">
      <button class="action-btn primary">作品</button>
      <button class="action-btn secondary" @click="$emit('subscribe')">订阅</button>
    </div>
    <div class="social-links">
      <a href="#" class="social-link" title="Bilibili"><i class="ri-bilibili-fill"></i></a>
      <a href="#" class="social-link" title="GitHub"><i class="ri-github-fill"></i></a>
      <a href="#" class="social-link" title="Gitee">
        <svg
          viewBox="0 0 1092 1024"
          xmlns="http://www.w3.org/2000/svg"
          width="1em"
          height="1em"
          style="vertical-align: middle"
        >
          <path
            fill="currentColor"
            d="M514.133293 1024c-282.76611 0-512-229.23389-512-512S231.367183 0 514.133293 0 1026.133293 229.23389 1026.133293 512 796.899403 1024 514.133293 1024z m259.157033-568.88941l-290.75924 0.014063c-13.965946 0-25.287203 11.321257-25.287203 25.27314l-0.028125 63.218476c0 13.965946 11.306257 25.287203 25.273141 25.287203h177.024483c13.965946 0 25.287203 11.306257 25.287203 25.272203v12.64407a75.846609 75.846609 0 0 1-75.847547 75.847547H368.739142a25.287203 25.287203 0 0 1-25.287203-25.273141V417.194317a75.846609 75.846609 0 0 1 75.847546-75.846609l353.919591-0.015c13.965946 0 25.27314-11.306257 25.287203-25.27314l0.07125-63.188476c0-13.965946-11.306257-25.287203-25.272203-25.301266l-353.991778 0.014063c-104.718814-0.014063-189.624491 84.891614-189.624491 189.609491v353.963653c0 13.966884 11.320319 25.287203 25.287203 25.287203h372.934915c94.265683 0 170.666354-76.400672 170.666354-170.666354V480.397793c0-13.951884-11.320319-25.27314-25.287203-25.27314z"
          />
        </svg>
      </a>
      <a href="#" class="social-link" title="Email"><i class="ri-mail-fill"></i></a>
    </div>
  </div>
</template>

<script setup>
function formatNum(n) {
  const num = Number(n)
  if (!isFinite(num)) return n
  if (num >= 100000000) return (num / 100000000).toFixed(1).replace(/\.0$/, '') + '亿'
  if (num >= 10000) return (num / 10000).toFixed(1).replace(/\.0$/, '') + '万'
  return String(num)
}
</script>

<style scoped>
.profile-card {
  background: var(--bg-base);
  padding: 1.5em;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-light);
  text-align: center;
  border: 1px solid var(--border-light);
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5em;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 1em;
  border: 3px solid var(--color-primary);
  padding: 3px;
}

.name {
  font-size: var(--font-size-h4);
  color: var(--text-primary);
  margin: 0;
  font-weight: 600;
}

.bio {
  font-size: 0.9em;
  color: var(--text-secondary);
  margin: 0.3em 0 0 0;
}

.stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1.5em;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.count {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--text-primary);
}

.label {
  font-size: 0.85em;
  color: var(--text-secondary);
}

.action-buttons {
  display: flex;
  gap: 1em;
  margin-bottom: 1.5em;
}

.action-btn {
  flex: 1;
  padding: 0.8em;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-medium);
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-base);
}

.action-btn.primary {
  background: var(--color-primary);
  color: #fff;
}

.action-btn.secondary {
  background: transparent;
  color: var(--color-primary);
}

.action-btn.primary:hover {
  opacity: 0.85;
}

.action-btn.secondary:hover {
  background: var(--color-primary);
  color: #fff;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1.2em;
}

.social-link {
  font-size: 1.4em;
  color: var(--text-secondary);
  transition: color var(--transition-base);
}

.social-link:hover {
  color: var(--color-primary);
}
</style>
